<script setup>
import { onMounted, ref } from 'vue';
import { useWxdataStore } from "@/stores/wxdata"
import { UseDataStore } from '@/stores/basicData';
import router from '@/router';

const wxdataStore = useWxdataStore()
const DataStore = UseDataStore()

const list = ref({})
const wxdata = ref({})

const onSubmit = () => {
    if (typeof WeixinJSBridge === "undefined") {
        if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
        } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady);
            document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
        }
    } else {
        // eslint-disable-next-line no-undef
        WeixinJSBridge.invoke('getBrandWCPayRequest', {
            "appId": "wx564d88ff17b07255",     //公众号ID，由商户传入
            "timeStamp": wxdata.value.timeStamp,     //时间戳，自1970年以来的秒数
            "nonceStr": wxdata.value.nonceStr,      //随机串
            "package": wxdata.value.prepayId,
            "signType": "RSA",     //微信签名方式：
            "paySign": wxdata.value.paySign //微信签名
        },
            //必须用箭头函数，因为下面用的this需要指向全局，如果用普通函数的话，this会指向wx
            (res) => {
                if (res.err_msg === "get_brand_wcpay_request:ok") {
                    // 使用以上方式判断前端返回,微信团队郑重提示：
                    //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                    this.$notify({
                        message: '订单支付成功,将在2秒后跳转至订单~~',
                        color: '#ffffff',
                        background: '#2ED0DF',
                        duration: 1000,
                    })
                    setTimeout(() => {
                        router.push({
                            path: '/show'
                        })
                    }, 1000)
                } else {
                    this.$notify({
                        type: 'warning',
                        message: '订单支付失败,请重新下单，如有疑问请添加客服解决~~',
                        color: '#ffffff',
                        background: '#ee0a24',
                        duration: 2000,
                    })
                }
            })
    }
}
const formattedAmount = () => {
    return list.value.amount / 100;
}
onMounted(() => {
    list.value = DataStore.data
    wxdata.value = wxdataStore.wxdata
})
</script>

<template>
    <van-nav-bar title="订单"></van-nav-bar>
    <div class="container">
        <van-cell-group inset>
            <van-cell title="1公里价格(一次)" value="1.5元"></van-cell>
            <van-cell title="3公里价格(一次)" value="2.5元"></van-cell>
        </van-cell-group>
        <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
            下单信息
        </van-divider>
        <van-cell-group inset>
            <van-cell title="乐跑id" :value=list.userId></van-cell>
            <van-cell title="乐跑公里" :value=list.km></van-cell>
            <van-cell title="乐跑次数" :value=list.times></van-cell>
            <van-cell title="开始时间" :value=list.startDate></van-cell>
            <van-cell title="总金额" :value="formattedAmount()"></van-cell>
        </van-cell-group>
    </div>
    <div class="footer">
        <van-submit-bar :price=list.amount button-text="提交订单" @submit="onSubmit"></van-submit-bar>
    </div>
</template>

<style scoped>
body {
    background-color: #f7f7f7;
}

.container {
    margin-top: 10px;
}
</style>
